<template>
    <div class="box-car-manage">
        <div class="btn-add">
            <el-button size="medium" type="primary" @click="showPop">新增车型</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%;text-align:left">
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="length" label="长(米)"></el-table-column>
            <el-table-column prop="width" label="宽(米)"></el-table-column>
            <el-table-column prop="height" label="高(米)"></el-table-column>
            <el-table-column prop="weight" label="重(吨)"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class='pop-wrapper' v-show="isShowPop">
            <div class="pop-box">
                <h1 class="title">新增车型</h1>
                <el-form label-width="100px" class="demo-ruleForm">
                    <el-form-item label="车型名称">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="尺寸">
                        <div class="flex-row">
                            <el-input placeholder="长" v-model="formData.long"></el-input>-
                            <el-input placeholder="宽" v-model="formData.width"></el-input>-
                            <el-input placeholder="高" v-model="formData.height"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="重量">
                        <el-input v-model="formData.weight"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addCar">确定</el-button>
                        <el-button @click="closePop">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog title="删除车型" :visible.sync="dialogVisible" width="30%">
            <span>确定删除?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deletCar">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import vPop from "./common/pop.vue";
import re from "../assets/js/re.js";
import toast from "../assets/js/toast.js";

export default {
  data() {
    return {
      isShowPop: false,
      tableData: [],
      formData: {
        name: "",
        long: "",
        width: "",
        height: "",
        weight: "",
        iniPrice: "",
        exceedPrice: "",
        iniDis: ""
      },
      carId: null,
      editType: 1,
      dialogVisible: false
    };
  },
  methods: {
    handleEdit(index, row) {
      this.editType = 2;
      this.carId = row.id;
      this.formData.name = row.name;
      this.formData.long = row.length;
      this.formData.width = row.width;
      this.formData.height = row.height;
      this.formData.weight = row.weight;
      this.isShowPop = true;
    },
    handleDelete(index, row) {
      this.dialogVisible = true;
      this.carId = row.id;
    },
    showPop() {
      this.isShowPop = true;
      this.formData.name = "";
      this.formData.long = "";
      this.formData.width = "";
      this.formData.height = "";
      this.formData.weight = "";
      this.formData.iniPrice = "";
      this.formData.exceedPrice = "";
      this.formData.iniDis = "";
    },
    closePop() {
      this.isShowPop = false;
      this.editType = 1;
    },
    getCarList() {
      let self = this;
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      fetch("/api/admin/carlist?mid=" + mid)
        .then(response => response.json())
        .then(data => {
          self.tableData = data.data;
        })
        .catch(err => console.log("Oh, error", err));
    },
    deletCar() {
      let self = this;
      fetch("/api/admin/deletecar", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: "id=" + self.carId
      })
        .then(response => response.json())
        .then(res => {
          self.dialogVisible = false;
          self.getCarList();
        })
        .catch(err => console.log("Oh, error", err));
    },
    addCar() {
      
      let self = this;
      let name = re.isChinese(this.formData.name, "请填写中文车型名称");
      let long = re.isFloatNum(this.formData.long, "车长度必须是数字");
      let width = re.isFloatNum(this.formData.width, "车宽度必须是数字");
      let height = re.isFloatNum(this.formData.weight, "车重量必须是数字");
      let mid = JSON.parse(localStorage.getItem("userInfo")).merchantId;
      if (name) {
        toast("error", name);
        return;
      }
      if (long) {
        toast("error", long);
        return;
      }
      if (width) {
        toast("error", width);
        return;
      }
      if (height) {
        toast("error", height);
        return;
      }
  
      fetch("/api/admin/addcar", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: `name=${self.formData.name}&long=${self.formData.long}&width=${
          self.formData.width
        }&height=${self.formData.height}&weight=${self.formData.weight}&type=${
          self.editType
        }&id=${self.carId}&mid=${mid}
        `
      })
        .then(response => response.json())
        .then(res => {
          if (res.status == 100) {
             self.$notify({
              title: "操作成功",
              message: res.msg,
              type: "success"
            });
            self.closePop();
            self.getCarList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {
    vPop
  },
  created() {
    this.getCarList();
  }
};
</script>

<style lang='scss'>
@import "../assets/scss/common.scss";
@import "../assets/scss/car.scss";
</style>
